.top-nav {
  position: relative;
  z-index: 10;
  margin-bottom: 0;
  font-weight: 200;
  font-style: normal;
  font-size: 16px;
}

.top-nav,
.top-nav li {
  background-color: transparent;
  text-shadow: 0 0 10px fade(@blue-space, 100%);
}

.top-nav-dark {
  label {
    position: relative;
    right: 0;
    top: 15px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 1.8em;
    float: right;
  }

  label:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.25em;
    width: 1.8em;
    height: 0.15em;
    background: white;
    box-shadow: 0 0.50em 0 0 white, 0 1.0em 0 0 white;
  }

  a {
    color: white;
  }

  a:hover {
    opacity: .75;
  }
}

header .current-item {
  position: relative;
  font-weight: 200;
  font-style: normal;
  &:after {
    position: absolute;
    content: '';
    height: 3px;
    background-color: @brand-teal;
    width: 100%;
    bottom: -7px;
    left: 0;
    border-radius: 3px;
  }
}

@media screen and (max-width: @breakpoint-tablet) {
  .top-nav {
    float: none;

    ul {
      display: none;
      clear: left;

      > li {
        padding: 0;
      }

      > li a {
        padding: @ui-padding-default @ui-padding-default @ui-padding-default 0;
        display: block;
      }
    }
  }

  .top-nav-dark {
    label {
      right: @ui-padding-default;
    }
  }

  .top-nav .menu-toggle:checked ~ ul {
    position: absolute;
    top: 55px;
    left: -9%;
    width: 117.8%;
    background-image: linear-gradient(to bottom, @brand-blue, darken(@brand-blue, 2) 100%);
  }

  .top-nav ul > li a {
    padding-left: 7%;
  }

  header .current-item {
    padding-left: 10% !important;
    &:after {
      display: none;
    }
    &:before {
      position: absolute;
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: @brand-teal;
      top: 47%;
      left: 7%;
    }
  }
}

@media screen and (max-width: @breakpoint-smartphone) {
  .top-nav .menu-toggle:checked ~ ul {
    left: -6%;
    width: 111.5%;
  }

  .top-nav ul > li a {
    padding-left: 5%;
  }

  header .current-item {
    &:before {
      left: 5%;
    }
  }
}
